<template>
    <div id="stock-detail">
        <el-table :data="tableData" size="mini" border height="200">
            <!--<el-table-column show-overflow-tooltip prop="fundCode" label="产品代码"></el-table-column>-->
            <el-table-column show-overflow-tooltip prop="fundCodeText" label="产品代码"></el-table-column>
            <el-table-column show-overflow-tooltip prop="fundNameSt" label="产品简称"></el-table-column>
            <el-table-column show-overflow-tooltip prop="stockCode" label="证券代码"></el-table-column>
            <el-table-column show-overflow-tooltip prop="stockNameSt" label="证券简称"></el-table-column>
            <el-table-column show-overflow-tooltip prop="dataType" label="数据类型"></el-table-column>
            <el-table-column show-overflow-tooltip prop="amount" label="数量"></el-table-column>
            <el-table-column show-overflow-tooltip prop="price" label="价格"></el-table-column>
            <el-table-column show-overflow-tooltip prop="marketValue" label="市值"></el-table-column>
            <el-table-column show-overflow-tooltip prop="dealAmount" label="成交数量"></el-table-column>
            <el-table-column show-overflow-tooltip prop="dealPrice" label="成交价格"></el-table-column>
            <el-table-column show-overflow-tooltip prop="dealMarketValue" label="成交市值"></el-table-column>
            <el-table-column show-overflow-tooltip prop="sourceType" label="数据来源">
                <template slot-scope="scope">
                    {{ SourceType[scope.row.sourceType] }}
                </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="issueNameSt" label="发行人信息"></el-table-column>
            <el-table-column show-overflow-tooltip prop="issueOutGrade" label="主体评级"></el-table-column>
            <el-table-column show-overflow-tooltip prop="stockOutGrade" label="债项评级"></el-table-column>
            <el-table-column show-overflow-tooltip prop="remainingMaturityDay" label="剩余期限（天）"></el-table-column>
        </el-table>
        <div>
            <el-pagination
                background
                @current-change="handlePage"
                layout="total, prev, pager, next"
                :total="paging.total"
                :page-size="paging.pageSize"
                :current-page.sync="paging.currentPage"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { getCurrentPageData, NumberToWords } from '@/utils/tools';
import DictionConstUtil from '@/utils/diction-const-util';
export interface paging {
    total?: number;
    pageSize?: number;
    currentPage?: number;
}
@Component({ name: 'ItemRealTimeStockDetail' })
export default class ItemRealTimeStockDetail extends Vue {
    @Prop() data: any[];

    private tableData: any[] = [];

    private SourceType = DictionConstUtil.SourceType;

    // 分页
    private paging = { currentPage: 1, pageSize: 15, total: 0 };

    @Watch('data', { immediate: true, deep: true })
    async watchData() {
        this.handlePage(1);
    }

    async handlePage(val: number) {
        let tableData = this.currentChange(val);
        for (const item of tableData) {
            item.fundCodeText = (await DictionConstUtil.FNFundShowCode(item.fundCode)) || '';
        }
        this.tableData = tableData;
    }

    currentChange(val: number): any[] {
        // console.log(this.tableData, 'table');
        if (this.data && this.data.length) {
            this.paging.total = this.data.length;
        } else {
            this.paging.total = 0;
        }
        // this.page.total = this.tableData.length ? this.tableData.length : 0;
        this.paging.currentPage = val;
        return getCurrentPageData(this.data, this.paging.currentPage, this.paging.pageSize);
    }
}
</script>
